<script>
import {api} from "@/components/comm/api.js";

export default {
  name: "IdiomsSolitaire",
  data() {
    return {
      input: '',
      history: [],
    };
  },
  methods: {
    async submit() {
      this.history.push(this.input);
      const response = await api.get(
          '/idioms-solitaire/get-next',
          {params: {question: this.input.charAt(this.input.length - 1)}},
      );
      this.history.push(response.data);
    },
  },
}
</script>

<template>
  <el-form @submit.prevent="submit">
    <div id="history">
      <template v-for="item in history">
        <el-text class="block">{{ item }}</el-text>
      </template>
    </div>
    <el-input v-model="input"></el-input>
    <el-button @click="submit">提交</el-button>
  </el-form>
</template>

<style scoped>
  .block {
    display: block;
  }
</style>